웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > html

[CSS] 폰트와 관련된 모든 속성들 알아보기

Last Modified : 2015-11-03 / Created : 2015-01-30
4,908
View Count

! 자간, 글자와의 사이값을 수정, letter-spacing


letter-space: 수정값


수정값의 단위는 pt, em, px 단위가 사용되며 특이한 점은 음수 사용이 가능하다는 점으로 0px을 입력할 경우 자간이 0이 되지 않고 기본값이 적용됩니다. 그렇기 때문에 자간을 없애기 위해서는 -(마이너스) 값이 필요합니다. 아래 예를 참고하세요.

! letter-spacing 값이 0인 경우



TEST letter-spacing


!! letter-spacing 값이 -2px인 경우(음수)



TEST letter-spacing


!!! letter-spacing 값이 2px인 경우(양수)



TEST letter-spacing


! letter-spacing를 응용한 display 속성 응용하기


나란한 두 개의 블럭을 위치하기 위해서 사용할 수 있는 방법은 두 가지입니다. 하나는 float를 사용한 정렬이고 다른 하나는 두 개 블럭의 display속성을 inline-block으로 맞추는 것입니다. 하지만 둘 다 장점과 단점을 가지고 있는데요...

1. float 속성을 사용할 경우 가운데 정렬이 어렵다.
float는 left, right정렬이 가능하기 때문에 가운데 정렬을 원할 경우 다른 방법이 필요합ㄴ디ㅏ.

2. display속성값을 inline-block으로 주면 가운데 공간이 생긴다.
inline을 사용한 방법은 가운데 미세한 공간이 생깁니다. 이 값이 바로 letter-spacing의 기본값(Default)에 의해서 발생하는 공간입니다. 마이너스값을 주어 이 공간을 없애는 것이 가능합니다.

Previous

[CSS] position 속성이 absolute인 경우 상위 레이어 또는 전체 윈도우 기준 정렬방법

Previous

[HTML] 라디오 버튼(radio button) 만들기, 선택방법